<!-- <template>
  <div class="p-2">
      <h1>登录页</h1>
      <el-row class="mb-4">
          <el-button>Default</el-button>
          <el-button type="primary">Primary</el-button>
          <el-button type="success">Success</el-button>
          <el-button type="info">Info</el-button>
          <el-button type="warning">Warning</el-button>
          <el-button type="danger">Danger</el-button>
      </el-row>

      <el-row class="mb-4">
          <el-button plain>Plain</el-button>
          <el-button type="primary" plain>Primary</el-button>
          <el-button type="success" plain>Success</el-button>
          <el-button type="info" plain>Info</el-button>
          <el-button type="warning" plain>Warning</el-button>
          <el-button type="danger" plain>Danger</el-button>
      </el-row>

      <el-row class="mb-4">
          <el-button round>Round</el-button>
          <el-button type="primary" round>Primary</el-button>
          <el-button type="success" round>Success</el-button>
          <el-button type="info" round>Info</el-button>
          <el-button type="warning" round>Warning</el-button>
          <el-button type="danger" round>Danger</el-button>
      </el-row>

  </div>
</template> -->

<template>
    <div class="grid grid-cols-2 h-screen">
        <div class="col-span-2 order-2 p-10 md:col-span-1 md:order-1 bg-black">
            <div class="flex justify-center items-center h-full flex-col animate__animated animate__bounceInLeft animate__fast">
                <h2 class="font-bold text-4xl mb-7 text-white">Weblog 博客登录</h2>
                <p class="text-white">一款由Spring Boot + MyBatis Plus + Vue 3.2 + Vite 4 开发的前后端分离博客。</p>
                <img src="@/assets/developer.png" class="w-1/2">
            </div>
        </div>

        <div class="col-span-2 order-1 md:col-span-1 md:order-2 bg-white">
            <div class="flex justify-center items-center h-full flex-col animate__animated animate__bounceInRight animate__fast">
                <h1 class="font-bold text-4xl mb-5">欢迎回来</h1>
                <div class="flex items-center justify-center mb-7 text-gray-400 space-x-2">
                    <span class="h-[1px] w-16 bg-gray-200"></span>
                    <span>账号密码登录</span>
                    <span class="h-[1px] w-16 bg-gray-200"></span>
                </div>
            <el-form class="w-5/6 md:w-2/5">
                <el-form-item>
                    <!-- 输入框组件 -->
                    <el-input size="large" placeholder="请输入用户名" :prefix-icon="User" clearable/>
                </el-form-item>

                <el-form-item>
	                <!-- 密码框组件 -->
                    <el-input size="large" type="password" placeholder="请输入密码" :prefix-icon="Lock" clearable/>
                </el-form-item>

                <el-form-item>
                    <!-- 登录按钮，宽度设置为100% -->
                    <el-button class="w-full" size="large" type="primary">登录</el-button>
                </el-form-item>
            </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
    //引入 ELement Plus 中的用户，锁图标
    import { User, Lock } from '@element-plus/icons-vue'
</script>
